<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0,maximum-scale=1.0" />
<!-- jquery库 -->
		  <script type="text/javascript" src="../common/meta.js"></script>
		<script src="search.js"></script>
		<script type="text/javascript" src="./cache.js"></script> 
   
		<style>
		 
        #pullToUP #pullUp .message span.pullLabel:after { content: "加载更多数据"; }
		#pullToUP  #pullUp.flip .message span.pullLabel:after { content: "松开手指刷新数据"; }
		#pullToUP #pullUp.loading .message span.pullLabel:after { content: "正在加载中..."; }
		
	    table th{
	    background-color: #49afcd;
	    color:#fff;
	    }
	   	.panel{
    		margin:10px;
    		border:1px solid;
    		border-color: gray;
    		padding: 2px;
    		border-radius:8px;
    	}
		li {
			    line-height: 60px;
		}
		.ui-body-c, .ui-overlay-c {
	    	background: none;
	    	color: #333;
		}
		.home{
		 	margin-top:5px;
		 	float:right;
		 }
		.ui-header .ui-title{
		    font-size: 18px;
		}
                   ul, ol {
			margin: 0 0 0px 0px;
			padding: 0;
		}
         .back{
		 	margin-top:5px;
             float:left;
		 }

	  </style>    
</head>
<body>
<div id="searchPage" data-role="page" class="bodyframe">
	   <div data-role="header" class="theme-info">
		   <ul class="back">
	   		<a   href="main.html"><image src='../image/left_48.png'></image></a>
	   	</ul>
		   	<ul class="home">
		   		<a  id="home" ><image src='../image/home_48.ico'></image></a>
		   	</ul>
			<h1>搜索结果</h1>
	   </div>
	   <div class="input-append panel">
			<div class="ui-grid-a">
						<div class="ui-block-a">
							<input id="searchName" name="searchName" placeholder="搜索名称" type="text" class="{required:true,lowcase:true}"></input>
							<button class="btn" id="search" type="button">查询</button>
						</div>			
			</div>
		</div>
		<div class="panel">
		<table id="gridPage" class="table table-bordered " data-role="gridtable" data-settings="{pageSize:5,currentPageIndex:1,server:localStorage['APP_AJAX_PATH']+'/drinkingBar/view/search.jsp.findDrink',autoload:true}">
				<thead>
				<tr>
					<th class="formatter-image"  >图片</th>
					<th class="formatter-name" class="sortable-desc">名称</th>
					<th class="formatter-price" >价格</th>
					<th class="formatter-editOrDelete th-info" >操作</th>
				</tr>
			</thead>
			<tbody >
				<tr class='grid_tr_templete' >
					<td data-title="图片" width="25%"></td>
					<td data-title="名称"  width="25%"></td>
					<td data-title="价格"  width="25%"></td>
					<td data-title="操作" width="25%"></td>
				</tr>
			</tbody>
		</table>
				   <!-- 
				      data-role="pullToRefresh"   自动化滚动刷新组件
				      data-target-grid='gridPage' 匹配相应table，这里是id为gridPage的table
				      style="height:300px;"   设定滚动区域高度
				    -->
					   <div  id="pullToUP" data-role="pullToRefresh"  data-target-grid='gridPage'  style="height:40px;">
		                   <table  >
			                   <tbody>
			                   </tbody>
			                    <tfoot >
									<tr >
										<td colspan="7">
											 <!-- 可定制的工具栏 -->
											<div class="row-fluid pagebar auto-pagebar">
											 
											</div>
										</td>
									</tr>
								</tfoot>
			                   
		                   </table>
					  </div>
		</div>
</div>
	
</body>

</html>